<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Crew, checkStatusCrew, crewExcel } from "@/http/api";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
export default {
  components: { outMain },
  name: "",
  data() {
    return {
      tableData: [],
      company_type: localStorage.getItem("company_type"),
      selectArr: [],
      statusArr: [
        { label: "全部", value: "" },
        { label: "在职", value: "1" },
        { label: "离职", value: "2" },
      ],
      queryData: {
        real_name: "",
        crew_status: "",
        page: 1,
        per_page: 5,
      },
      total: 0,
      headArr: [
        { name: "船员序号", key: "cy_xh" },
        { name: "船员姓名", key: "real_name" },
        { name: "船员年龄", key: "age" },
        { name: "船员职务", key: "zw" },
        { name: "证书等级", key: "zsdj" },
        { name: "工作经验", key: "gzjy" },
        { name: "船员学历", key: "xl" },
        { name: "船舶类型", key: "cblx" },
        { name: "期望航线", key: "hxyq" },
        { name: "期望月薪", key: "qwyx" },
        { name: "出生地", key: "csd" },
        { name: "手机号", key: "mobile" },
        { name: "身份证号", key: "idcard" },
        { name: "工服尺寸", key: "gfcc" },
        { name: "鞋码", key: "shoe_size" },
        { name: "紧急联系人姓名", key: "jjlxr_name" },
        { name: "紧急联系人电话", key: "jjlxr_mobile" },
        { name: "更新时间", key: "create_time" },
      ],
    };
  },
  props: {},
  setup() {},
  methods: {
    addFn(id) {
      this.$router.push({
        path: "/signListAdd",
        query: { id: id, page: id ? this.queryData.page : undefined },
      });
    },
    detailFn(id) {
      this.$router.push({
        path: "/signListDetail",
        query: { id: id, page: this.queryData.page },
      });
    },
    leaveFn(row, type) {
      let str = type == 1 ? "恢复在职" : "离职";
      let str2 = type == 1 ? "" : "离职后此船员将自动下船";
      ElMessageBox.confirm(`确定为此船员办理${str}操作吗?${str2}`, "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let data = {
          shipowner_crew_id: row.shipowner_crew_id,
          status: type,
        };
        checkStatusCrew(data).then((res) => {
          if (res.data.code == 1) {
            ElMessage({
              type: "success",
              message: "操作成功",
            });
            this.getData();
          }
        });
      });
    },
    async getData() {
      const { data } = await Crew(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    exportFn() {
      crewExcel({}).then((res) => {
        if (res.data.code == 1) {
          let arr = res.data.data;
          for (let item of arr) {
            item.age = item.age + "岁";
            item.gzjy = item.gzjy + "年";
            let dw = item.qwyx_dw == 1 ? "元" : "美元";
            item.qwyx = item.qwyx + dw;
          }
          let headArr = this.headArr.map((item) => {
            return item.name;
          });
          let exportArr = [headArr];
          for (let item of arr) {
            let itemArr = [];
            for (let a of this.headArr) {
              itemArr.push(item[a.key]);
            }
            exportArr.push(itemArr);
          }
          this.exportToExcel(exportArr);
        }
      });
    },
    exportToExcel(data) {
      // 将数据转换为工作表
      const worksheet = XLSX.utils.aoa_to_sheet(data);

      // 创建工作簿并添加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      // 生成Excel文件
      const excelBuffer = XLSX.write(workbook, {
        bookType: "xlsx",
        type: "array",
      });

      // 使用blob和saveAs下载文件
      const dataBlob = new Blob([excelBuffer], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
      });
      saveAs(dataBlob, "export.xlsx");
    },
    handleSelectionChange(value) {
      this.selectArr = value;
    },
    downFn(row) {
      this.$router.push({
        path: "/signDown",
        query: { id: row.shipowner_crew_id },
      });
    },
  },
  mounted() {},

  created() {
    this.queryData.page = Number(localStorage.getItem("boot_page")) || 1;
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="tableCont">
      <div class="tableName flexCont">
        <div>我的船员（{{ total }}）</div>
      </div>
      <div class="tableSerch">
        <div class="serchLeft">
          <btn value="新增" @click="addFn()"></btn>
        </div>
        <div class="serchRight">
          <el-form class="flexCenter" :inline="true">
            <el-form-item>
              <el-input
                clearable
                @clear="getData"
                @keyup.enter="getData"
                v-model="queryData.real_name"
                placeholder="请输入船员姓名"
              />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="queryData.crew_status"
                clearable
                @change="getData"
                placeholder="请选择船员状态"
              >
                <el-option
                  v-for="item in statusArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <btn value="搜索" @click="getData"></btn>
            <btn
              value="导出所有船员"
              v-if="company_type == 1"
              class="hasLeft"
              @ok="exportFn"
            ></btn>
          </el-form>
        </div>
      </div>
      <el-table
        class="tableMain"
        @selection-change="handleSelectionChange"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="30" />
        <el-table-column
          prop="real_name"
          show-overflow-tooltip
          label="船员名称"
        />
        <el-table-column
          width="150"
          prop="mobile"
          show-overflow-tooltip
          label="手机号"
        />
        <el-table-column
          width="200"
          prop="idcard"
          show-overflow-tooltip
          label="身份证号"
        />
        <el-table-column show-overflow-tooltip label="船员薪资">
          <template #default="{ row }">
            <span>{{ row.qwyx }}{{ row.qwyx_dw == 1 ? "元" : "美元" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="zw" show-overflow-tooltip label="签约岗位" />
        <el-table-column prop="authBook" show-overflow-tooltip label="船员状态">
          <template #default="{ row }">
            <el-tag v-if="row.crew_status == 1">在职</el-tag>
            <el-tag type="info" v-if="row.crew_status == 2">离职</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="authBook"
          width="140"
          show-overflow-tooltip
          label="证书状况"
        >
          <template #default="{ row }">
            <el-tag
              type="success"
              v-if="row.jjdaoqi_zs.length == 0 && row.daoqi_zs.length == 0"
              >正常</el-tag
            >
            <el-tag
              type="warning"
              v-if="row.jjdaoqi_zs.length > 0 && row.daoqi_zs.length == 0"
              >即将到期({{ row.jjdaoqi_zs.length }}个)</el-tag
            >
            <el-tag type="danger" v-if="row.daoqi_zs.length > 0"
              >已到期({{ row.daoqi_zs.length }}个)</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          width="170"
          prop="create_time"
          show-overflow-tooltip
          label="上船时间"
        />
        <el-table-column prop="Name" width="220" label="操作">
          <template #default="{ row }">
            <div class="tableCtrl">
              <div
                class="greenText ctrlText"
                @click="detailFn(row.shipowner_crew_id)"
              >
                详情
              </div>
              <div
                class="blueText ctrlText"
                v-if="row.crew_status == 1"
                @click="addFn(row.shipowner_crew_id)"
              >
                编辑
              </div>
              <div
                class="redText ctrlText"
                v-if="row.crew_status == 1"
                @click="leaveFn(row, 2)"
              >
                办理离职
              </div>
              <div
                class="blueText ctrlText"
                v-if="row.crew_status == 2"
                @click="leaveFn(row, 1)"
              >
                恢复在职
              </div>
              <div class="blueText ctrlText" @click="downFn(row)">下载简历</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageCont">
        <el-pagination
          v-model:currentPage="queryData.page"
          v-model:page-size="queryData.per_page"
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          @size-change="getData"
          @current-change="getData"
        />
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
